import Taro, { Component, Config } from '@tarojs/taro'
import { View, Form, Textarea, Input, Button, Image } from '@tarojs/components'
import styles from './index.module.scss'
import classNames from 'classnames'
import { CommentImgPicker, FyImg } from "@/components/index"
import { postComplainAdd } from '@/api/orderApi'
import additional from '@/assets/images/additional.jpg'
import { toService, toComplaint, toHomePage } from '@/utils/page_router'
import { getAppConfig } from '@/utils/storage'
import './index.scss'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtIcon } from "taro-ui"

export default class ComplaintIndex extends Component {
  state: any
  config: Config = {
    navigationStyle: 'custom',
    backgroundTextStyle: "dark",
    enablePullDownRefresh: true,
  }

  constructor() {
    super(...arguments)
    this.state = {
      isOpen: false
    }
  }


  componentDidMount() {
  }

  openluckdraw() {
    this.setState({
      isOpen: true
    })
  }

  closeluckdraw() {
    this.setState({
      isOpen: false
    })
  }

  render() {
    const { tags, maxlength, valueLength, images, isOpen } = this.state
    return (<View className={styles.servicePage}>
      <View className={styles.head}>
        <View className='f-s-28' onClick={() => Taro.navigateBack({ delta: 1 })}>返回</View>
        <View className='f-s-32'>联系客服</View>
        <View onClick={() => toHomePage()}>主页</View>
      </View>

      <View className={styles.content}>
        <View>
          <h1 className={styles.title}>温馨提示</h1>
          <p>客服在线时间：</p>
          <p>工作日 上午9:00-晚上18:00</p>
          <p>如有问题，请咨询在线客服和留言！</p>
        </View>

        <View className={styles.action}>
          <View className={styles.actionItem} onClick={() => toService()}>在线客服</View>
          <View className={styles.actionItem} onClick={() => toComplaint()}>立即投诉</View>
        </View>
      </View>
      <View className="luckdraw" onClick={this.openluckdraw.bind(this)}>
      </View>
      <FyImg src={getAppConfig('problemSolv')} className={styles.additional} />
      <AtModal isOpened={isOpen}>
        <AtModalContent>
          <AtIcon value='close-circle' color='#fff' className="close-circle" onClick={this.closeluckdraw.bind(this)} ></AtIcon>
          <View className="gongzhonghaao">
            <View className="publicQrCode-box">
              <FyImg className='publicQrCode' src={getAppConfig('publicQrCode')} />
              <View>
                <View className="wx-desc">在微信中搜索「淘拼优选商城」 </View>
                <View className="wx-img"></View>
              </View>
            </View>
            <View className="bottom">
              <View className="btn save">保存二维码</View>
              <View className="btn copy">复制公众号名称</View>
            </View>
          </View>
        </AtModalContent>
      </AtModal>
    </View>
    )
  }
}
